<template>
  <div>
    <section class="todoapp">
      <!-- 输入备忘，使用 v-model 绑定 newTodo -->
      <!-- 监听 keyup 事件，同时使用修饰器 .enter，按 Enter 键时事件才触发 -->
      <header>
        <h1>My Todo List</h1>
        <input
          class="new-todo"
          placeholder="add a new todo..."
          v-model="newTodo"
          @keyup.enter="addTodo"
        />
      </header>

      <!-- 查看所有备忘 -->
      <!-- v-for 遍历所有备忘，key 绑定备忘 id，class 绑定样式 -->
      <ul class="todo-list">
        <li
          v-for="todo in todos"
          :key="todo.id"
          class="todo"
          :class="{
            completed: todo.completed,
            editing: todo.id === editedTodo.id,
          }"
        >
          <div class="view">
            <!-- 选择某条备忘 -->
            <!-- v-model 绑定是否选中 -->
            <input class="toggle" type="checkbox" v-model="todo.completed" />
            <!-- 双击可操作备忘 -->
            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
            <!-- 删除某条备忘 -->
            <button class="destroy" @click="removeTodo(todo)"></button>
          </div>
          <!-- 修改备忘的数据，失焦或 Enter 键可更新数据，Esc键取消更新 -->
          <input
            type="text"
            class="edit"
            v-model="editedTodo.title"
            @blur="doneEdit(editedTodo)"
            @keyup.enter="doneEdit(editedTodo)"
            @keyup.esc="cancelEdit()"
          />
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  name: "TodoList",
  components: {},
  props: {},
  data () {
    return {
      id: 1,
      todos: [], // 所有备忘列表
      newTodo: "", // 新增的备忘，从输入框输入
      editedTodo: {}, // 修改中的备忘
    }
  },
  methods: {
    addTodo () {
      if (!this.newTodo) {
        return;
      }
      this.todos.unshift({
        id: this.id++,
        title: this.newTodo,
        completed: false
      })
      this.newTodo = '';
    },
    editTodo (todo) {
      this.editedTodo = { ...todo }
    },
    doneEdit (todo) {
      this.todos = this.todos.map(x => {
        return todo.id === x.id ? { ...todo } : { ...x };
      });
      this.editedTodo = {};
    },
    cancelEdit () {
      this.editedTodo = {};
    },
    removeTodo (todo) {
      const index = this.todos.findIndex(x => x.id === todo.id);
      this.todos.splice(index, 1);
    }
  }
}
</script>
<style lang="stylus" scoped>
.todoapp {
  max-width: 550px;
  min-width: 230px;
  margin: 20px auto;

  header {
    text-align: center;

    h1 {
      font-size: 50px;
    }

    .new-todo {
      width: 100%;
      padding: 16px 16px 16px 60px;
      font-size: 24px;
      border: 1px solid #eee;
    }
  }

  .todo-list {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      font-size: 24px;

      .view {
        .toggle {
          width: 40px;
          height: 40px;
          text-align: center;
        }

        label {
          padding: 15px 15px 15px 60px;
        }
      }
    }
  }
}
</style>
